<template>
  <section class="padding">
    <el-card class="box-card">
      <el-form
        :inline="true"
        :model="searchCriteria"
        class="form-inline padding-top-sm "
        size="mini"
      >
        <el-row>
          <el-col :span="20">
            <el-form-item label="运单号">
              <el-input
                v-model="searchCriteria.waybillNo"
                placeholder="运单号"
              />
            </el-form-item>
            <el-form-item label="主单号">
              <el-input
                v-model="searchCriteria.masterNo"
                placeholder="主单号"
              />
            </el-form-item>
            <el-form-item label="订单状态">
              <el-select
                v-model="searchCriteria.status"
                filterable
                multiple
                placeholder="订单状态"
              >
                <el-option
                  v-for="(item, value) in publicData.abroadWaybillStatusMap"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="销售">
              <el-select
                v-model="searchCriteria.salesmanId"
                filterable
                placeholder="销售"
              >
                <el-option
                  v-for="(item, value) in publicData.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="客服">
              <el-select
                v-model="searchCriteria.servicesId"
                filterable
                placeholder="客服"
              >
                <el-option
                  v-for="(item, value) in publicData.userAll"
                  :key="value"
                  :label="item"
                  :value="value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" class="text-right">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card class="margin-top">
      <div class=" padding-bottom-sm">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[20, 40, 60, 80, 100]"
          :page-size="pageSize"
          layout="prev, pager, next, jumper, sizes,total"
          :total="count"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <TableModule
        :table-columns="tableColumns"
        :table-data="pickupInfo"
        :table-operation="tableOperation"
        @clickOperation="operationList"
        @triggerClick="triggerClick"
      />
    </el-card>
  </section>
</template>

<script>
import { getToken } from '@/utils/auth'
import TableModule from '@/components/TableModule'
import { mapGetters } from 'vuex'
import { compileStr } from '@/utils'
import {
  abroadWaybillList,
  callbackConfirmWaybill,
  confirmAbroadWaybill,
  deleteAbroadWaybillById
} from '@/api/abroadWaybill'
import { searchOrderByWaybillNo } from '@/api/waybill'
export default {
  name: 'OverseasWarehouseWaybill',
  components: {
    TableModule
  },
  data() {
    return {
      status: 'all',
      currentPage: 1,
      pageSize: 20,
      count: 1,
      searchCriteria: {
        masterNo: '',
        waybillNo: '',
        status: [],
        salesmanId: '',
        servicesId: ''
      },
      tableColumns: [
        { prop: 'waybillNo', label: '运单号' },
        { prop: 'masterNo', label: '主单号' },

        { prop: 'seaAirWaybillNo', label: 'FBA运单号', type: 'click' },
        { prop: 'customerShortName', label: '公司名称' },
        { prop: 'returnCountry', label: '退货国家' },
        { prop: 'serviceArr', label: '服务项目' },
        { prop: 'statusName', label: '状态' },
        { prop: 'salesmanId', label: '销售' },
        { prop: 'servicesId', label: '客服' },
        { prop: 'cuser', label: '创建人' },
        { prop: 'cdate', label: '创建时间' },
        { prop: 'returnBatchIndex', label: '退货批次' }
      ],
      pickupInfo: [],
      tableOperation: [
        {
          name: 'question',
          tips: '账单状态,灰色未出账，绿色已出账',
          type: 'img',
          show: ['all']
        },
        {
          name: 'edit-outline',
          tips: '编辑',
          type: 'i',
          show: ['all']
        },
        {
          name: 's-home',
          tips: '没有对应的联系信息',
          type: 'i',
          show: ['all'],
          isColor: true
        },
        {
          name: 'close',
          tips: '删除',
          type: 'i',
          show: [10]
        },
        {
          name: 'check',
          tips: '确认订单',
          type: 'i',
          show: [10]
        },
        {
          name: 'return',
          tips: '打回待确认',
          type: 'svg',
          show: [20]
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['publicData'])
  },
  mounted() {
    this.getAbroadWaybillList()

    if (this.$route.query.waybillNo) {
      this.searchCriteria.waybillNo = this.$route.query.waybillNo
      this.onSubmit()
    }
    if (this.$route.query.referenceNo) {
      this.searchCriteria.referenceNo = this.$route.query.referenceNo
      this.onSubmit()
    }
  },
  methods: {
    async getAbroadWaybillList() {
      this.$store.dispatch('app/toggleDialog', true)
      const list = await abroadWaybillList({
        authorization: getToken(),
        currentPage: this.currentPage,
        masterNo: this.searchCriteria.masterNo,
        pageSize: this.pageSize,
        salesmanId: parseInt(this.searchCriteria.salesmanId),
        servicesId: parseInt(this.searchCriteria.servicesId),
        waybillNo: this.searchCriteria.waybillNo,
        status: this.searchCriteria.status
      })
      console.log(
        '%cdata: ',
        'color: MidnightBlue; background: Aquamarine;',
        list
      )

      const customerNameShortMap = this.publicData.customerNameShortMap
      for (const i of list.datas) {
        if (i.status) {
          i.statusName = {
            label: this.publicData.abroadWaybillStatusMap[i.status]
            // tag: { type: 'danger', label: '国外退件' }
          }
        }

        if (i.salesmanId) {
          i.salesmanId = this.publicData.userAll[i.salesmanId]
        }
        if (i.servicesId) {
          i.servicesId = this.publicData.userAll[i.servicesId]
        }

        if (i.cuser) {
          i.cuser = this.publicData.customerAll[i.cuser]
        }

        if (i.serviceItem) {
          const serviceArr = i.serviceItem.split(',')
          const arr = []
          for (const j of serviceArr) {
            if (j) {
              arr.push(this.publicData.serviceItemMap[j])
            }
          }

          i.customerShortName = customerNameShortMap[i.customerId]

          i.serviceArr = arr.join('，')
        }

        if (i.returnCountry) {
          i.returnCountry = this.publicData.countryMap[i.returnCountry]
        }
      }

      this.pickupInfo = list.datas
      this.count = list.count
      this.$store.dispatch('app/toggleDialog', false)
    },
    handleSizeChange(val) {
      this.$store.dispatch('app/toggleDialog', true)

      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getAbroadWaybillList()
    },
    handleCurrentChange(val) {
      this.$store.dispatch('app/toggleDialog', true)

      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getAbroadWaybillList()
    },
    onSubmit() {
      this.$store.dispatch('app/toggleDialog', true)

      console.log('searchCriteria', this.searchCriteria)
      this.currentPage = 1
      this.getAbroadWaybillList()
    },
    onReset() {
      this.$store.dispatch('app/toggleDialog', true)

      this.searchCriteria = {
        masterNo: '',
        waybillNo: '',
        status: [],
        salesmanId: '',
        servicesId: ''
      }
      this.getAbroadWaybillList()
    },
    // 操作判断
    async operationList(data, name, index) {
      let routeUrl = null
      switch (name.name) {
        case 'edit-outline':
          console.log('data :>> ', data)

          routeUrl = this.$router.resolve({
            path: '/abroadWaybill/abroadWaybillEdit',
            query: { id: compileStr(data.id.toString()) }
          })
          // console.log('routeUrl :>> ', routeUrl)

          window.open(routeUrl.href, '_blank')
          break
        case 'check':
          this.$confirm('确认当前运单？')
            .then(_ => {
              this.colCheck(data)
            })
            .catch(_ => {})
          break
        case 'close':
          this.$confirm('删除当前运单？')
            .then(_ => {
              this.colDel(data.id)
            })
            .catch(_ => {})
          break
        case 'return':
          this.$confirm('打回当前运单？')
            .then(_ => {
              this.colReturn(data.id)
            })
            .catch(_ => {})
          break
      }
    },

    async colDel(id) {
      this.$store.dispatch('app/toggleDialog', true)

      const res = await deleteAbroadWaybillById({
        id: id
      })
      this.result(res)
    },
    async colCheck(data) {
      this.$store.dispatch('app/toggleDialog', true)

      const res = await confirmAbroadWaybill({
        id: data.id,
        status: data.status
      })
      this.result(res)
    },
    async colReturn(id) {
      this.$store.dispatch('app/toggleDialog', true)

      const res = await callbackConfirmWaybill({
        id: id
      })

      this.result(res)
    },
    result(res) {
      if (res.code === 200) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.getAbroadWaybillList()
      } else {
        this.$message.error('操作失败')
        this.$store.dispatch('app/toggleDialog', false)
      }
    },
    async triggerClick(s) {
      console.log('triggerClick :>> ', s.row.seaAirWaybillNo)
      const data = await searchOrderByWaybillNo({
        waybillNo: s.row.seaAirWaybillNo
      })
      if (data.datas.length === 1) {
        const routeUrl = this.$router.resolve({
          name: 'WaybillDetails',
          params: { id: compileStr(data.datas[0].id.toString()) }
        })

        window.open(routeUrl.href, '_blank')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-col {
  border-radius: 4px;
}

.pan-btn {
  font-size: 12px;
  // color: #fff;
  width: 100%;
  text-align: center;
  color: #337ab7;
  padding: 14px 0;
  border-radius: 8px;
  border: none;
  outline: none;
  transition: 600ms ease all;
  position: relative;
  display: inline-block;
  cursor: pointer;

  &:hover {
    color: #30b08f;
    // background: #ccc;

    &:before,
    &:after {
      background: #30b08f;
      width: 100%;
      transition: 600ms ease all;
    }
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    transition: 400ms ease all;
  }

  &::after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
  }
}
.financial-title {
  color: rgba(0, 0, 0, 0.45);
  font-size: 16px;
  text-align: center;
}

.financial-title-money {
  color: #666;
  font-size: 20px;
  text-align: center;
}

.shadow {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.form-inline {
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 8px;
  }
}
</style>
<style lang="scss">
.table-box th {
  padding: 2px 0;
}
</style>
